<template>
	<view>
		<div class="drop-files" ref="upload">
			<view class="upload-image">
				<view v-for="(item, index) in files" :key="index" class="list">
					<view class="item">
						<view class="bottom-group">
							<view class="button-group">
								<button type="default" @click="del(index)">删除</button>
								<button type="primary" @click="uplaod(item)" :disabled="item.isUpload">上传</button>
							</view>
							<progress v-if="item.progress" :percent="item.progress" />
						</view>
						<template v-if="thumbnail">
							<view v-if="item.type === 'image'" class="icon uni-icons-image-filled" @tap="previewImage(item.src)"></view>
							<view v-else-if="item.type === 'video'" class="icon uni-icons-videocam-filled"></view>
							<view v-else class="icon uni-icons-paperclip"></view>
						</template>
						<template v-else>
							<image v-if="item.type === 'image'" class="img" :src="item.src" mode="aspectFit" @tap="previewImage(item.src)"></image>
							<video class="img" v-else-if="item.type === 'video'" :src="item.src" controls></video>
							<image v-else-if="item.type === 'file'" class="img" src="https://photo.16pic.com/00/20/38/16pic_2038922_b.jpg" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</div>
		<button v-if="showButton" @click="upload">上传文件</button>
	</view>
</template>

<script>
var URL = URL || window.URL || null;
import { FilesType } from '../../common/mixin/upload.js';
import UploadMixin from '../../common/mixin/upload-mixin.js';
export default {
	name: 'drop-files',
	mixins: [UploadMixin],
	props: {
		showButton: {
			type: Boolean,
			default: false
		}
	},
	components: {},

	data() {
		return {
			thumbnail: false
		};
	},

	computed: {},

	watch: {},

	created() {},

	mounted() {
		this.addFile();
	},

	destroyed() {},

	methods: {
		addFile: function() {
			let dropbox = this.$refs.upload,
				self = this;
			//阻止系统事件
			dropbox.addEventListener(
				'dragenter',
				function(e) {
					e.stopPropagation();
					e.preventDefault();
				},
				false
			);
			dropbox.addEventListener(
				'dragover',
				function(e) {
					e.stopPropagation();
					e.preventDefault();
				},
				false
			);
			dropbox.addEventListener(
				'drop',
				function(e) {
					e.stopPropagation();
					e.preventDefault();
					let files = e.dataTransfer.files; //取得拉过来的图片
					if (!self.isUpload) {
						self.isUpload = true;
						let fl = files.length - 1;
						for (fl; fl >= 0; fl--) {
							if (self.files.length > self.filesLength - 1) {
								self.files.pop();
							}
							const size = files[fl].size;
							if (size > 99 * 1024 * 1024) {
								continue;
							}
							const src = URL.createObjectURL(files[fl]);
							let item = {
								src,
								file: files[fl],
								isUpload: false
							};
							self.files.unshift(item);
						}
					}
					self.getFilesInfo();
				},
				false
			);
		},
		getFilesInfo() {
			if (this.files.length === 0) {
				this.isUpload = false;
				return;
			}
			let index = this.files.findIndex(item => {
				return !item.type;
			});
			if (index < 0) {
				this.isUpload = false;
				return;
			}
			const file = this.files[index];
			const self = this;
			let type = file.file.type;
			let str = type.substr(0, type.indexOf('/'));
			if (!FilesType[type]) {
				str = 'file';
			}
			this.$set(file, 'type', str);
			if (str === 'image') {
				uni.getImageInfo({
					src: file.src,
					success: function(res) {
						const { width, height } = res;
						const { name, size, type } = file.file;
						self.$set(file, 'fileInfo', {
							width,
							height,
							name,
							size,
							type
						});
					},
					complete: function() {
						self.getFilesInfo();
					}
				});
			} else if (str === 'video') {
				const { name, size } = file.file;
				const videoElement = document.createElement('VIDEO');
				videoElement.addEventListener('loadedmetadata', function(_event) {
					const [duration, width, height] = [parseInt(videoElement.duration), parseInt(videoElement.videoWidth), parseInt(videoElement.videoHeight)];
					self.$set(file, 'fileInfo', {
						width,
						height,
						name,
						size,
						type,
						duration
					});
					self.getFilesInfo();
				});
				videoElement.src = file.src;
			} else {
				const { name, size } = file.file;
				this.$set(file, 'fileInfo', {
					name,
					size,
					type
				});
				this.getFilesInfo();
			}
		},
		upload() {
			this.uploadAll();
		}
	}
};
</script>

<style scoped lang="scss">
.icon {
	font-size: 4vw;
}
.bottom-group {
	position: absolute;
	z-index: 2;
	width: 90%;
	bottom: 20%;
	left: 5%;
	.button-group {
		display: flex;
		margin-bottom: 5px;
		button {
			background-color: #2c405a;
		}
	}
}

.upload-image {
	grid-template-columns: repeat(5, 1fr);
	grid-row-gap: 10px;
	grid-column-gap: 10px;
}
@media screen and (max-width: 361px) {
	.upload-image {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 5px;
		grid-column-gap: 5px;
	}
}
@media screen and (min-width: 1200px) {
	/* .uplaod-page{
		padding: 5px;
	} */
	.upload-image {
		grid-template-columns: repeat(8, 1fr);
		grid-row-gap: 15px;
		grid-column-gap: 15px;
	}
}
.upload-image {
	display: grid;
	.list {
		width: 100%;
		padding-top: 100%;
		position: relative;
		border: thin dotted rgb(250, 0, 255);
		border-radius: 5%;
		.item {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			// top: 10%;left:10%;width: 80%;height: 80%;
			button {
				padding: 3px;
				line-height: 18px;
				font-size: 14px;
			}
			.img {
				border-radius: 5%;
				width: 90%;
				height: 90%;
			}
		}
	}
}
.drop-files {
	background-color: #c3dcf8;
	min-width: 300px;
	min-height: 300px;
	width: 100%;
}
</style>
